<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Progress } from "vant";
import { ref, onMounted } from "vue";
// import DigitScroll from "@/components/Activit/digitScroll.vue";
import { ActivityAxios } from "@/api";
import { Overlay } from "vant";
import { FiltrationFun } from "@/utils";
import ActivitInfo from "@/components/Activit/activitInfo.vue";
import SlotMachine from "lattice-lottery-new/SlotMachine";
import { UserStore } from "@/store";
import moment from "moment";
const userStore = UserStore();
const { t } = useI18n();
const overlayShow = ref(false);
const errShow = ref(false);
const leaderboardTime = ref("");
//过滤替换用户名
// function replaceMiddleFour(str) {
//   // 如果字符串长度小于等于 4，直接返回原字符串
//   if (str.length <= 4) {
//     return str;
//   }

//   // 计算开始和结束的位置
//   const start = Math.floor((str.length - 4) / 2);
//   const end = start + 4;

//   // 用 * 替换中间部分的4位
//   return str.slice(0, start) + "****" + str.slice(end);
// }
const list = [
  {
    label: ".",
  },
  {
    label: "9",
  },
  {
    label: "8",
  },
  {
    label: "7",
  },
  {
    label: "6",
  },
  {
    label: "5",
  },
  {
    label: "4",
  },
  {
    label: "3",
  },
  {
    label: "2",
  },
  {
    label: "1",
  },
  {
    label: "0",
  },
];
const oLottery = ref();
onMounted(async () => {
  //获取排行榜
  getSuperMemberDayVirtualRank();
  getSuperMemberDayDetail();
  // //初始老虎机
  oLottery.value = await new SlotMachine({
    element: ".digitScroll-frame",
    list,
    colCount: 5,
    onend: _e => {
      //动画结束后的
      errShow.value = true;
    },
    onsubmit: () => {
      console.log("onsubmit这里是什么");
    },
  });
});

const rankList: any = ref([]);
//返回超级会员日活动虚拟排行榜
const getSuperMemberDayVirtualRank = () => {
  ActivityAxios.getSuperMemberDayVirtualRank().then(res => {
    res.list.sort((a, b) => a.virtualBonus - b.virtualBonus).reverse();
    rankList.value = FiltrationFun.generateLeaderboardData(res.list);
  });
};
const conditionsMet = ref(false);
const dayDetail = ref<any>({
  curBetAmount: 0,
  curBetDays: 0,
  curRecharge: 0,
  dateList: [],
  ruleBetAmount: 0,
  ruleBetDays: 0,
  ruleRecharge: 0,
  status: 0,
});
//判断日期是否在当前时间之后
const isAfterlist: any = ref([]);
// 判断日期是否在当前时间之前
const isBeforelist: any = ref([]);
//存款的比例
const curRechargePercentage = ref(0);
//投注的比例
const betAmountPercentage = ref(0);
//投注天数的比例
const betDaysPercentage = ref(0);
const isSameDays = ref(false);
const isSameDate = ref("");
const getSuperMemberDayDetail = () => {
  const uid = userStore.userInfoDetails.account.uid;
  ActivityAxios.getSuperMemberDayDetail({ uid: uid }).then((res: any) => {
    //获取大于当前的时间
    if (res.dateList.length > 0) {
      const now = moment();
      res.dateList = res.dateList.filter(date => moment(date).isAfter(now));
    }
    if (res.dateList.length > 3) {
      res.dateList.splice(res.dateList.length - 1, 1);
    }
    resultDate(res.dateList);
    getleaderboardTime(res.dateList);
    dayDetail.value = res;
    // dayDetail.value.curRecharge = 500000;
    // dayDetail.value.curBetAmount = 5000;
    // dayDetail.value.curBetDays = 3000;
    curRechargePercentage.value =
      (dayDetail.value.curRecharge / dayDetail.value.ruleRecharge) * 100;
    betAmountPercentage.value =
      (dayDetail.value.curBetAmount / dayDetail.value.ruleBetAmount) * 100;
    betDaysPercentage.value = (dayDetail.value.curBetDays / dayDetail.value.ruleBetDays) * 100;
    if (
      dayDetail.value.curRecharge >= dayDetail.value.ruleRecharge &&
      dayDetail.value.curBetAmount >= dayDetail.value.ruleBetAmount &&
      dayDetail.value.curBetDays >= dayDetail.value.ruleBetDays
    ) {
      conditionsMet.value = true;
    }
  });
};
const resultDate = arr => {
  arr.map(date => {
    const currentDate = moment(); // 当前日期对象
    const targetDate = moment(date); // 将字符串转换为 moment 对象

    if (targetDate.isSame(currentDate, "day")) {
      //相同日期1
      isSameDate.value = date;
      isSameDays.value = true;
    } else if (targetDate.isBefore(currentDate, "day")) {
      isBeforelist.value.push(date);
      //是之前的日期
      return 2;
    } else {
      //之后的日期3
      isAfterlist.value.push(date);
    }
  });
};
//成功的
const getRewards = ref(0);
const reward = ref(0);
//获取奖励
const obterRecompensas = () => {
  ActivityAxios.getReceiveSuperMemberDayReward().then(res => {
    if (res.code === 3019) {
      getRewards.value = 0;
      errShow.value = true;
    } else {
      getRewards.value = 1;
      reward.value = res.reward;
      const indexList = getIndexArray(reward.value);
      if (oLottery.value) oLottery.value.go(indexList);
    }
  });
};
function getIndexArray(num) {
  // 将数字转换为字符串，并逐字符映射到下标
  const numStr = num.toString();
  const indices = numStr.split("").map(char => {
    return list.findIndex(item => item.label === char);
  });

  // 左侧补充 10（表示 0 的下标），确保数组长度为 5
  while (indices.length < 5) {
    indices.unshift(10);
  }
  // 确保返回数组长度正好为 5
  return indices.slice(-5);
}
function getleaderboardTime(arr) {
  // 获取当前时间
  const currentDate = moment();

  // 将数组中的日期转换为 moment 对象
  const dateObjects = arr.map(date => moment(date, "YYYY-MM-DD"));

  // 判断是否所有日期都大于当前时间
  const allGreater = dateObjects.every(date => date.isAfter(currentDate, "day"));

  // 判断是否存在日期等于当前时间
  const hasEqual = dateObjects.some(date => date.isSame(currentDate, "day"));

  if (hasEqual) {
    // 如果有日期等于当前时间，获取当前时间的上一个月
    leaderboardTime.value = currentDate.clone().subtract(1, "month").format("YYYY-MM-DD");
  } else if (allGreater) {
    // 如果所有日期都大于当前时间，获取最大日期的上一个月
    const maxDate = moment.max(dateObjects);
    leaderboardTime.value = maxDate.clone().subtract(1, "month").format("YYYY-MM-DD");
  } else {
    // 如果存在小于当前时间的日期，获取最小日期的上一个月
    const minDate = moment.min(dateObjects);
    leaderboardTime.value = minDate.clone().subtract(1, "month").format("YYYY-MM-DD");
  }
}
</script>
<template>
  <div class="super-constent-frame">
    <div class="super-frame">
      <!-- 超级会员日 -->
      <!-- <img class="beijing-frame" src="@/image/new_img/activity/beijing.png" /> -->
      <div class="super-constent">
        <img class="dabiaoti-img" src="@/image/new_img/activity/dabiaoti.png" />
        <div class="beijingkuang-img-frame">
          <img
            class="beijingkuang-img"
            src="@/image/new_img/activity/canyutiaojian_beijingkuang.png"
          />
          <div class="day1 df ai-center jc-center">
            {{ dayDetail.dateList[0] ? dayDetail.dateList[0] : "" }}
          </div>
          <div class="day1 day2 df ai-center jc-center">
            {{ dayDetail.dateList[1] ? dayDetail.dateList[1] : "" }}
          </div>
          <div class="day1 day3 df ai-center jc-center">
            {{ dayDetail.dateList[2] ? dayDetail.dateList[2] : "" }}
          </div>
          <div class="xiaobiaoti-beijingkuang-frame">
            <img class="xiaobiaoti-img" src="@/image/new_img/activity/xiaobiaoti.png" />
            <div class="stare-frame" v-if="!conditionsMet">
              <div class="df stare-content ai-center">
                <img class="title-img" src="@/image/new_img/activity/canyutiaojian_icon1.png" />
                <div class="title-name">{{ t("systemNotify.deposit") }}</div>
                <div class="progress-frame">
                  <div
                    class="progress-div"
                    :style="{
                      left: `calc(${
                        curRechargePercentage > 100 ? 100 : curRechargePercentage
                      }% - 5px)`,
                    }"
                  ></div>
                  <Progress
                    :percentage="curRechargePercentage > 100 ? 100 : curRechargePercentage"
                    track-color="#ffffff26"
                    color="#AB3FE7"
                    stroke-width="0.1rem"
                    :show-pivot="false"
                  />
                </div>
                <div class="df ai-center">
                  <div class="pt-frame">{{ t("currencyType.pt") }}</div>
                  <div class="pt-val">{{ dayDetail.ruleRecharge }}</div>
                </div>
              </div>
              <div class="df stare-content ai-center">
                <img class="title-img" src="@/image/new_img/activity/canyutiaojian_icon2.png" />
                <div class="title-name">{{ t("activity.superMemberDay.bettingVolume") }}</div>
                <div class="progress-frame">
                  <div
                    class="progress-div"
                    :style="{
                      left: `calc(${betAmountPercentage > 100 ? 100 : betAmountPercentage}% - 5px)`,
                    }"
                  ></div>
                  <Progress
                    :percentage="betAmountPercentage > 100 ? 100 : betAmountPercentage"
                    track-color="#ffffff26"
                    color="#AB3FE7"
                    stroke-width="0.1rem"
                    :show-pivot="false"
                  />
                </div>
                <div class="df ai-center">
                  <div class="pt-frame">{{ t("currencyType.pt") }}</div>
                  <div class="pt-val">{{ dayDetail.ruleBetAmount }}</div>
                </div>
              </div>
              <div class="df stare-content ai-center">
                <img class="title-img" src="@/image/new_img/activity/canyutiaojian_icon4.png" />
                <div class="title-name">{{ t("activity.superMemberDay.bettingDays") }}</div>
                <div class="progress-frame">
                  <div
                    class="progress-div"
                    :style="{
                      left: `calc(${betDaysPercentage > 100 ? 100 : betDaysPercentage}% - 5px)`,
                    }"
                  ></div>
                  <Progress
                    :percentage="betDaysPercentage > 100 ? 100 : betDaysPercentage"
                    track-color="#ffffff26"
                    color="#AB3FE7"
                    stroke-width="0.1rem"
                    :show-pivot="false"
                  />
                </div>
                <div class="df ai-center">
                  <div class="pt-val top-content-curvalue">{{ dayDetail.ruleBetDays }}</div>
                  <div class="pt-frame top-content-curunit">
                    {{ t("activity.superMemberDay.days") }}
                  </div>
                </div>
              </div>
            </div>
            <div class="stare-frame df ai-center jc-center" v-if="conditionsMet">
              <img class="res-img" src="@/image/new_img/activity/canyutiaojian_icon3.png" />
              <div class="res-frame df ai-center jc-center">
                {{ t("activity.superMemberDay.resContent") }}
              </div>
            </div>
          </div>
          <div class="dizhi-frame"></div>
          <div class="slot-machine-frame">
            <!-- 数字滚动 -->
            <div class="digitScroll-frame"></div>
            <img
              class="slotjiqi-image slotjiqi1"
              src="@/image/new_img/activity/slotjiqi_deng1.png"
            />
            <img
              class="slotjiqi-image slotjiqi2"
              src="@/image/new_img/activity/slotjiqi_deng2.png"
            />
            <img class="slot-machine-img" src="@/image/new_img/activity/slotjiqi_beijing.png" />
            <img
              v-if="conditionsMet"
              class="anniu1-img"
              src="@/image/new_img/activity/anniu_1.png"
              @click="obterRecompensas"
            />
            <img
              v-if="!conditionsMet"
              class="anniu1-img"
              src="@/image/new_img/activity/anniu.png"
            />
            <img
              class="anniu1-img3"
              src="@/image/new_img/activity/anniu_3.png"
              @click="overlayShow = true"
            />
          </div>
        </div>
      </div>
      <div class="activitInfo-frame">
        <ActivitInfo :actType="11" :title="t('activity.eventDescription')" />
      </div>
    </div>
    <!-- 点击获取奖励后面失败时间未到的弹窗和得到奖励的 -->
    <Overlay :show="errShow" z-index="3000" style="background: none">
      <div class="err-frame df ai-center jc-center">
        <div class="backg-frame" @click="errShow = false"></div>
        <div class="err-content-frame df jc-center" v-if="getRewards == 0">
          <div class="content-frame">
            <div class="err-content">
              <img class="bell-lan-frame" src="@/image/new_img/activity/bell_lan.png" />
              <div class="errTitle-frame">{{ t("activity.superMemberDay.errTitle") }}</div>
              <div class="day-date">
                <div v-if="isAfterlist.length > 0">{{ isAfterlist[0] }}</div>
                <div v-if="isAfterlist.length === 0 && isBeforelist.length > 0">
                  {{ isBeforelist[0] }}
                </div>
              </div>
              <div class="errContent-frame">{{ t("activity.superMemberDay.errContent") }}</div>
              <div class="alertdialog-btn df ai-center jc-center" @click="errShow = false">OK</div>
            </div>
          </div>
        </div>
        <div class="res-content-frame df jc-center" v-if="getRewards == 1">
          <img class="tanchuang-frame" src="@/image/new_img/activity/tanchuang.png" />
          <div class="isSameDate-frame">{{ isSameDate }}</div>
          <div class="reward-frame df jc-center ai-center">
            <div class="currencyType-frame">{{ t("currencyType.pt") }}</div>
            <div class="bonus-frame-value e">{{ reward }}</div>
          </div>
          <div class="buttom-frame df jc-center ai-center" @click="errShow = false">
            {{ t("activity.superMemberDay.receive") }}
          </div>
        </div>
      </div>
    </Overlay>

    <!-- 排行榜的弹窗 -->
    <Overlay
      :show="overlayShow"
      z-index="3000"
      style="
        background-color: #000000b3;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
      "
    >
      <div class="paihangbang-frame df ai-center jc-center">
        <div class="paihangbang-content">
          <img class="paihangbang" src="@/image/new_img/activity/paihangbang_beijing.png" />
          <img
            class="Closeb-img"
            src="@/image/new_img/home/Close_bai.png"
            @click="overlayShow = false"
          />
          <div class="day-frame">{{ leaderboardTime }}</div>
          <div class="rank1-frame">
            <img class="paihangbang-img" src="@/image/new_img/activity/paihangbang_jinqi1.png" />
            <img class="rank-frame-topicon" src="@/image/new_img/activity/paihangbang_icon_1.png" />
            <img class="user-img" :src="rankList[0].avatar" />
            <div class="user-name omit-1">{{ rankList[0].userName }}</div>
            <div class="money-frame">
              <div>{{ t("systemNotify.bonus") }}:</div>
              <div class="df jc-center money-content">
                <span>{{ t("currencyType.pt") }}</span>
                <div class="money-val">
                  {{ FiltrationFun.formatNumber(rankList[0].virtualBonus.toString()) }}
                </div>
              </div>
            </div>
          </div>
          <div class="rank1-frame rank2-frame">
            <img class="paihangbang-img" src="@/image/new_img/activity/paihangbang_jinqi2.png" />
            <img class="rank-frame-topicon" src="@/image/new_img/activity/paihangbang_icon_2.png" />
            <img class="user-img" :src="rankList[1].avatar" />
            <div class="user-name omit-1">{{ rankList[1].userName }}</div>
            <div class="money-frame">
              <div>{{ t("systemNotify.bonus") }}:</div>
              <div class="df jc-center money-content">
                <span>{{ t("currencyType.pt") }}</span>
                <div class="money-val">
                  {{ FiltrationFun.formatNumber(rankList[1].virtualBonus.toString()) }}
                </div>
              </div>
            </div>
          </div>
          <div class="rank1-frame rank3-frame">
            <img class="paihangbang-img" src="@/image/new_img/activity/paihangbang_jinqi3.png" />
            <img class="rank-frame-topicon" src="@/image/new_img/activity/paihangbang_icon_3.png" />
            <img class="user-img" :src="rankList[2].avatar" />
            <div class="user-name omit-1">{{ rankList[2].userName }}</div>
            <div class="money-frame">
              <div>{{ t("systemNotify.bonus") }}:</div>
              <div class="df jc-center money-content">
                <span>{{ t("currencyType.pt") }}</span>
                <div class="money-val">
                  {{ FiltrationFun.formatNumber(rankList[2].virtualBonus.toString()) }}
                </div>
              </div>
            </div>
          </div>
          <div class="list-frame">
            <div class="list-content" v-for="(item, index) in rankList.slice(3, 23)" :key="index">
              <img class="div-frame" src="@/image/new_img/activity/paihangbang_hang.png" />
              <div class="rank-num">
                {{ index + 4 }}
              </div>
              <div class="user-info df ai-center">
                <img class="user-img" :src="item.avatar" />
                <div class="user-name">{{ item.userName }}</div>
              </div>
              <div class="rank-bonus df ai-center">
                <span>{{ t("currencyType.pt") }}</span>
                <div class="rank-bonus-value">
                  {{ FiltrationFun.formatNumber(item.virtualBonus.toString()) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Overlay>
  </div>
</template>
<style lang="less" scoped>
.super-constent-frame {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
.super-constent {
  width: 100%;
  height: 1450px;
}
.super-frame {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  background-image: url(@/image/new_img/activity/beijing.png);
  // background-position: 0px 100px;
  background-size: cover;
  background-repeat: repeat;

  overflow-x: hidden;
  overflow-y: scroll;
  text-align: center;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
  .beijing-frame {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .dabiaoti-img {
    width: 676px;
    height: auto;
  }
  .beijingkuang-img-frame {
    // width: 676px;
    width: 100%;
    height: 328px;
    margin: auto;
    margin-top: -92px;
    position: relative;
    left: 0;
    top: 0;
    .beijingkuang-img {
      width: 676px;
      height: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
      z-index: 2;
    }
    .day1 {
      position: absolute;
      top: 30px;
      left: 210px;
      width: 150px;
      height: 68px;
      color: #ffee00;
      font-size: 24px;
      z-index: 3;
    }
    .day2 {
      left: 368px;
    }
    .day3 {
      left: 530px;
    }
    .xiaobiaoti-beijingkuang-frame {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      text-align: center;
      .xiaobiaoti-img {
        width: 100%;
        height: auto;
        margin-top: 100px;
      }
      .stare-frame {
        width: 600px;
        height: auto;
        margin: auto;
        margin-top: -20px;
        .stare-content {
          width: 100%;
          height: 52px;
        }
        .title-img {
          width: 34px;
          height: 34px;
          margin-right: 12px;
          margin-left: 16px;
        }
        .title-name {
          width: 120px;
          height: auto;
          font-size: 24px;
          color: #000000a6;
          text-align: left;
        }
      }
      .progress-frame {
        position: relative;
        left: 0;
        top: 0;
        width: 248px;
        height: 10px;
        .progress-div {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #ffffff;
          position: absolute;
          top: -2px;
          z-index: 10;
          /* 初始位置 */
          left: 0;
          transition: left 0.3s ease;
        }
      }
      .pt-frame {
        font-size: 24px;
        margin-left: 30px;
        margin-right: 8px;
        color: #000000a6;
      }
      .pt-val {
        color: #78340f;
        font-size: 28px;
        font-weight: 700;
      }
      .top-content-curvalue {
        width: 24px;
        text-align: right;
        margin-left: 30px;
        margin-right: 8px;
      }
      .top-content-curunit {
        margin-left: 0;
        margin-right: 0;
      }
    }
    .slot-machine-frame {
      width: 100%;
      height: 904px;
      position: relative;
      left: 0;
      right: 0;
      overflow: hidden;
      .slot-machine-img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: -50px;
      }
      .digitScroll-frame {
        width: 492px;
        height: auto;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 3.9rem;
        z-index: 33;
      }
      @media (min-width: 400px) {
        .digitScroll-frame {
          top: 4.1rem;
        }
      }
    }
    .dizhi-frame {
      width: 100%;
      height: 300px;
    }
    .anniu1-img {
      width: 360px;
      height: 118px;
      position: absolute;
      left: 70px;
      top: 495px;
      z-index: 33;
    }
    .anniu1-img3 {
      width: 250px;
      height: 118px;
      position: absolute;
      right: 70px;
      top: 495px;
      z-index: 33;
    }
  }
}
.slotjiqi-image {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: auto;
  animation: swap 1s infinite;
  opacity: 0;
  z-index: 32;
}
.slotjiqi1 {
  animation-delay: 0s;
}

.slotjiqi2 {
  animation-delay: 0.1s;
}
@keyframes swap {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.paihangbang-frame {
  width: 100%;
  height: 100%;
  margin: auto;

  .paihangbang-content {
    position: relative;
    left: 0;
    top: 0;
    width: 622px;
    height: 1078px;
    .paihangbang {
      width: 622px;
      height: auto;
    }
    .Closeb-img {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 22;
      width: 50px;
      height: 50px;
    }
    .day-frame {
      font-size: 40px;
      color: #bb0086;
      font-weight: 700;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 165px;
      left: 0;
      z-index: 2;
    }

    .rank1-frame {
      width: 150px;
      height: 234px;
      position: absolute;
      top: 390px;
      left: 0;
      right: 0;
      z-index: 2;
      margin: auto;
      text-align: center;
      .paihangbang-img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
      }
      .rank-frame-topicon {
        position: absolute;
        left: 0;
        right: 0;
        top: -30px;
        width: 66px;
        height: 66px;
        margin: auto;
        z-index: 3;
      }
      .user-name {
        position: absolute;
        left: 0;
        right: 0;
        top: 90px;
        z-index: 10;
        width: 80%;
        margin: auto;
        height: auto;
        text-align: center;
        font-size: 24px;
        color: #00000073;
      }
      .money-frame {
        position: absolute;
        left: 0;
        right: 0;
        top: 130px;
        z-index: 10;
        width: 100%;
        margin: auto;
        height: auto;
        text-align: center;
        font-size: 24px;
        color: #00000073;
        .money-content {
          width: 100%;
          height: auto;
          span {
            padding-top: 4px;
            color: #000000d9;
          }
          .money-val {
            font-size: 26px;
            color: #bb0086;
            font-weight: 700;
            margin-left: 2px;
          }
        }
      }
      .user-img {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        margin: auto;
        width: 66px;
        height: 66px;
        border-radius: 50%;
        z-index: 2;
      }
    }
    .rank2-frame {
      width: 150px;
      height: 234px;
      position: absolute;
      top: 425px;
      left: 56px;
      z-index: 2;
      text-align: center;
      right: auto;
    }
    .rank3-frame {
      width: 150px;
      height: 234px;
      position: absolute;
      top: 425px;
      left: auto;
      right: 56px;
      z-index: 2;
      text-align: center;
    }
    .list-frame {
      width: 500px;
      height: 390px;
      margin: auto;
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      margin: auto;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
        overflow: -moz-scrollbars-none; /* Firefox */
        -ms-overflow-style: none; /* IE 和 Edge */
      }
      .list-content {
        width: 100%;
        height: 50px;
        position: relative;
        left: 0;
        top: 0;
        margin-top: 10px;
        .list-content-frame {
          width: 100%;
          height: 100%;
        }
        .div-frame {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
        }
        .rank-num {
          width: 76px;
          height: 100%;
          line-height: 50px;
          text-align: center;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          font-size: 28px;
          color: #bb0086;
          font-weight: 700;
        }
        .user-info {
          position: absolute;
          left: 76px;
          top: 0;
          width: auto;
          height: 100%;
          z-index: 10;
          .user-img {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            margin-right: 10px;
          }
          .user-name {
            width: auto;
            font-size: 24px;
            color: #00000073;
          }
        }
        .rank-bonus {
          position: absolute;
          right: 40px;
          top: 0;
          width: auto;
          height: 100%;
          line-height: 50px;
          z-index: 10;
          span {
            font-size: 24px;
            color: #00000073;
            font-weight: 400;
          }
          .rank-bonus-value {
            color: #000000d9;
            font-size: 24px;
            margin-left: 10px;
            font-weight: 400;
          }
        }
      }
    }
  }
}
.activitInfo-frame {
  width: 90%;
  height: auto;
  margin: auto;
  // position: absolute;
  // bottom: -480px;
  // left: 0;
  // right: 0;

  // z-index: 50;
}
:deep(.slotMachine__col) {
  box-shadow: none;
}
:deep(.slotMachine__label) {
  font-size: 76px;
  font-weight: 700;
}
:deep(.slotMachine) {
  width: 100%;
}
.err-frame {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  .backg-frame {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: #00000099;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .err-content-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 622px;
    height: 646px;
    border-radius: 30px;
    backdrop-filter: blur(40px);
    box-shadow: 0px 2px 8px 0px rgb(43 22 0 / 25%);
    background: #ffffff14;
    .content-frame {
      width: 100%;
      text-align: center;
      background: transparent;
    }
    .err-content {
      width: 100%;
      height: 100%;
    }
    .bell-lan-frame {
      width: 100px;
      height: 100px;
      margin-top: 76px;
    }
    .errTitle-frame {
      width: 100%;
      text-align: center;
      margin-top: 38px;
      font-size: 28px;
      font-weight: 400;
      color: #ffffff;
      height: 36px;
      line-height: 36px;
    }
    .day-date {
      color: #ffee00;
      font-size: 32px;
      font-weight: 400;
      margin-top: 8px;
      height: 36px;
      line-height: 36px;
    }
    .errContent-frame {
      font-weight: 400;
      color: #ffffffa6;
      text-align: center;
      font-size: 26px;
      width: 450px;
      margin: auto;
      margin-top: 16px;
      height: 76px;
      line-height: 38px;
    }
    .alertdialog-btn {
      width: 252px;
      height: 84px;
      border-radius: 34px;
      background-image: linear-gradient(72deg, #fe7919 0%, #ab3fe7 100%);
      transition: transform 0.2s ease;
      font-size: 28px;
      color: #ffffff;
      margin: auto;
      margin-top: 76px;
    }
  }
}
.res-img {
  width: 100px;
  height: 100px;
  margin-right: 8px;
}
.res-frame {
  width: 474px;
  color: #78340f;
  font-weight: 400;
  font-size: 24px;
  height: 150px;
  line-height: 28px;
}
.res-content-frame {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -43%);
  z-index: 10;
  width: 100%;
  height: 750px;
  .tanchuang-frame {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .isSameDate-frame {
    width: 100%;
    text-align: center;
    color: #4256fe;
    font-weight: 700;
    font-size: 40px;
    position: absolute;
    left: 0;
    top: 30%;
    z-index: 2;
  }
  .reward-frame {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    .currencyType-frame {
      color: #ffee00;
      margin-right: 8px;
      font-size: 40px;
    }
    .bonus-frame-value {
      color: #ffee00;
      font-weight: 700;
      font-size: 96px;
    }
  }
  .buttom-frame {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 80%;
    z-index: 2;
    width: 250px;
    height: 100px;
    color: #ffffff;
    font-size: 28px;
    background-image: linear-gradient(106deg, #ffaf00 0%, #7041f3 85%);
    border-radius: 16px;
  }
}
</style>
